<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>EDU</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Demo project">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/home/styles/bootstrap4/bootstrap.min.css}">
    <link th:href="@{/home/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/owl.carousel.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/owl.theme.default.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/home/plugins/jquery.mb.YTPlayer-3.1.12/jquery.mb.YTPlayer.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/home/styles/main_styles.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/home/styles/responsive.css}">
</head>
<body>

<div class="super_container">

    <!-- Header -->

    <header class="header">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="header_content d-flex flex-row align-items-center justify-content-start">
                        <div class="logo"><a href="#">EDU</a></div>
                        <nav class="main_nav">
                            <ul>
                                <li class="active"><a th:href="@{/listBlog}">博客</a></li>
                                <li><a th:href="@{/video/shophome}">学院</a></li>
                                <li><a th:href="@{/resourceByName}">下载</a></li>
                                <li><a th:href="@{/chathome}">chat</a></li>
                                <li><a th:href="@{/queryByName}">问答</a></li>
                                <li><a th:href="@{/userhome}">个人中心</a></li>
                            </ul>
                        </nav>
                        <div class="search_container ml-auto">
                            <form action="#">
                                <input type="search" class="header_search_input" required="required"
                                       placeholder="Type to Search...">
                                <img class="header_search_icon" th:src="@{/home/images/search.png}" alt="">
                            </form>
                            &nbsp;&nbsp;<a th:href="@{/login}">登录</a>&nbsp;|&nbsp;<a th:href="@{/register}">注册</a>
                        </div>
                        <div class="hamburger ml-auto menu_mm">
                            <i class="fa fa-bars trans_200 menu_mm" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Menu -->
    <div class="menu d-flex flex-column align-items-end justify-content-start text-right menu_mm trans_400">
        <div class="menu_close_container">
            <div class="menu_close">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="logo menu_mm"><a href="#">Avision</a></div>
        <div class="search">
            <form action="#">
                <input type="search" class="header_search_input menu_mm" required="required"
                       placeholder="Type to Search...">
                <img class="header_search_icon menu_mm" th:src="@{/home/images/search_2.png}" alt="">
            </form>
        </div>
        <nav class="menu_nav">
            <ul class="menu_mm">
                <li class="menu_mm"><a href="index.html">home</a></li>
                <li class="menu_mm"><a href="#">Fashion</a></li>
                <li class="menu_mm"><a href="#">Gadgets</a></li>
                <li class="menu_mm"><a href="#">Lifestyle</a></li>
                <li class="menu_mm"><a href="#">Video</a></li>
                <li class="menu_mm"><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
    <!-- Home -->
    <div class="home">
        <!-- Home Slider -->
        <div class="home_slider_container">
            <div class="owl-carousel owl-theme home_slider">
                <!-- Slider Item -->
                <div class="owl-item">
                    <div id="top" class="home_slider_background"></div>
                    <div class="home_slider_content_container">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="home_slider_content">
                                        <div class="home_slider_item_title">
                                            <p>书籍是人类进步的阶梯，书籍是人类进步的阶梯，书籍是人类进步的阶梯，书籍是人类进步的阶梯，书籍是人类进步的阶梯</p>
                                        </div>
                                        <div class="home_slider_item_link">
                                            <a href="post.html" class="trans_200">查看详情
                                                <svg version="1.1" id="link_arrow_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
													 width="19px" height="13px" viewBox="0 0 19 13" enable-background="new 0 0 19 13" xml:space="preserve">
													<polygon fill="#FFFFFF" points="12.475,0 11.061,0 17.081,6.021 0,6.021 0,7.021 17.038,7.021 11.06,13 12.474,13 18.974,6.5 "/>
												</svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Similar Posts -->
                    <div class="similar_posts_container">
                        <div class="container">
                            <div class="row d-flex flex-row align-items-end">
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">好好学习，天天向上</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">好好学习，天天向上</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="home_slider_next_container">
                            <div id="imgdiv11" class="home_slider_next">
                                <div class="home_slider_next_background trans_400"></div>
                                <div class="home_slider_next_content trans_400">
                                    <div class="home_slider_next_title" th:text="${video1.videoname}">next</div>
                                    <div class="home_slider_next_link" th:text="video1.brief">How Did van Gogh’s Turbulent Mind Depict One of
                                        the Most Complex Concepts in Physics?
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slider Item -->
                <div class="owl-item">
                    <div id="imgdiv12" class="home_slider_background"></div>
                    <div class="home_slider_content_container">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="home_slider_content">
                                        <div class="home_slider_item_title">
                                            <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most
                                                Complex Concepts in Physics?</a>
                                        </div>
                                        <div class="home_slider_item_link">
                                            <a href="post.html" class="trans_200">Continue Reading
                                                <svg version="1.1" id="link_arrow_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
													 width="19px" height="13px" viewBox="0 0 19 13" enable-background="new 0 0 19 13" xml:space="preserve">
													<polygon fill="#FFFFFF" points="12.475,0 11.061,0 17.081,6.021 0,6.021 0,7.021 17.038,7.021 11.06,13 12.474,13 18.974,6.5 "/>
												</svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Similar Posts -->
                    <div class="similar_posts_container">
                        <div class="container">
                            <div class="row d-flex flex-row align-items-end">
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="home_slider_next_container">
                            <div id="imgdiv13" class="home_slider_next">
                                <div class="home_slider_next_background trans_400"></div>
                                <div class="home_slider_next_content trans_400">
                                    <div class="home_slider_next_title" th:text="${video1.videoname}">next</div>
                                    <div class="home_slider_next_link" th:text="${video1.brief}">How Did van Gogh’s Turbulent Mind Depict One of
                                        the Most Complex Concepts in Physics?
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slider Item -->
                <div class="owl-item">
                    <div id="top1" class="home_slider_background"></div>
                    <div class="home_slider_content_container">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="home_slider_content">
                                        <div class="home_slider_item_category trans_200"><a href="category.html"
                                                                                            class="trans_200">sport</a>
                                        </div>
                                        <div class="home_slider_item_title">
                                            <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most
                                                Complex Concepts in Physics?</a>
                                        </div>
                                        <div class="home_slider_item_link">
                                            <a href="post.html" class="trans_200">Continue Reading
                                                <svg version="1.1" id="link_arrow_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
													 width="19px" height="13px" viewBox="0 0 19 13" enable-background="new 0 0 19 13" xml:space="preserve">
													<polygon fill="#FFFFFF" points="12.475,0 11.061,0 17.081,6.021 0,6.021 0,7.021 17.038,7.021 11.06,13 12.474,13 18.974,6.5 "/>
												</svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Similar Posts -->
                    <div class="similar_posts_container">
                        <div class="container">
                            <div class="row d-flex flex-row align-items-end">
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                                <!-- Similar Post -->
                                <div class="col-lg-3 col-md-6 similar_post_col">
                                    <div class="similar_post trans_200">
                                        <a href="post.html">How Did van Gogh’s Turbulent Mind Depict One of the Most</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="home_slider_next_container">
                            <div id="imgdiv14" class="home_slider_next">
                                <div class="home_slider_next_background trans_400"></div>
                                <div class="home_slider_next_content trans_400">
                                    <div class="home_slider_next_title" th:text="${video1.videoname}">next</div>
                                    <div class="home_slider_next_link" th:text="${video1.brief}">How Did van Gogh’s Turbulent Mind Depict One of
                                        the Most Complex Concepts in Physics?
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="custom_nav_container home_slider_nav_container">
                <div class="custom_prev custom_prev_home_slider">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
						<polyline fill="#FFFFFF" points="0,5.61 5.609,0 7,0 7,1.438 2.438,6 7,10.563 7,12 5.609,12 -0.002,6.39 "/>
					</svg>
                </div>
                <ul id="custom_dots" class="custom_dots custom_dots_home_slider">
                    <li class="custom_dot custom_dot_home_slider active"><span></span></li>
                    <li class="custom_dot custom_dot_home_slider"><span></span></li>
                    <li class="custom_dot custom_dot_home_slider"><span></span></li>
                </ul>
                <div class="custom_next custom_next_home_slider">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
						<polyline fill="#FFFFFF" points="6.998,6.39 1.389,12 -0.002,12 -0.002,10.562 4.561,6 -0.002,1.438 -0.002,0 1.389,0 7,5.61 "/>
					</svg>
                </div>
            </div>

        </div>
    </div>

    <!-- Page Content -->

    <div class="page_content">
        <div class="container">
            <div class="row row-lg-eq-height">

                <!-- Main Content -->

                <div class="col-lg-9">
                    <div class="main_content">

                        <!-- Blog Section - Don't Miss -->

                        <div class="blog_section">
                            <div class="section_panel d-flex flex-row align-items-center justify-content-start">
                                <div class="section_title">每日精选</div>
                                <div class="section_tags ml-auto">
                                    <ul>
                                        <li class="active"><a href="category.html" th:href="@{/listBlog}">所有</a></li>
                                        <li><a href="category.html">数学</a></li>
                                        <li><a href="category.html">英语</a></li>
                                        <li><a href="category.html">快乐驿站</a></li>
                                        <li><a href="category.html">每日一问</a></li>
                                    </ul>
                                </div>
                                <div class="section_panel_more">
                                    <ul>
                                        <li>更多
                                            <ul>
                                                <li><a href="category.html">大学</a></li>
                                                <li><a href="category.html">高中</a></li>
                                                <li><a href="category.html">小学</a></li>
                                                <li><a href="category.html">初中</a></li>
                                                <li><a href="category.html">大一</a></li>
                                                <li><a href="category.html">高二</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="section_content">
                                <div class="grid clearfix">
                                    <!-- Largest Card With Image -->
                                    <div class="card card_largest_with_image grid-item">
                                        <img height="200px" width="200px" class="card-img-top"
                                             th:src="@{'/image/'+${blog1.titlephoto}}"
                                             alt="https://unsplash.com/@cjtagupa">
                                        <div class="card-body">
                                            <div class="card-title"><a href="post.html" name="blog1"
                                                                       th:text="${blog1.articletitle}">首篇博客</a></div>
                                            <p class="card-text" th:utext="${blog1.brief}">Pick the yellow peach that
                                                looks like a sunset with its red, orange, and pink coat skin, peel it
                                                off with your teeth. Sink them into unripened...</p>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(blog1.articletime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>
                                    <!-- Small Card Without Image -->
                                    <div class="card card_default card_small_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog2.articletitle}">第二篇博客</a>
                                            </div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(blog2.articletime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>
                                    <!-- Small Card With Background -->
                                    <div class="card card_default card_small_with_background grid-item">
                                        <div id="imgdiv" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog3.articletitle}">第三篇博客</a>
                                            </div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(blog3.articletime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>
                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${blog4.titlephoto}}"
                                             alt="https://unsplash.com/@jakobowens1">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog4.articletitle}">第四篇博客</a>
                                            </div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(blog4.articletime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>
                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${blog5.titlephoto}}"
                                             alt="https://unsplash.com/@jannerboy62">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog5.articletitle}">第五篇博客</a>
                                            </div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(blog5.articletime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Default Card No Image -->

                                    <div class="card card_default card_default_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog6.articletitle}">第六篇博客</a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Card No Image -->

                                    <div class="card card_default card_default_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog7.articletitle}">第七篇博客</a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Card No Image -->

                                    <div class="card card_default card_default_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${blog8.articletitle}">第八篇博客</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>

                        <!-- 结束 -->
                        <!--chat开始-->

                        <div class="blog_section">
                            <div class="section_panel d-flex flex-row align-items-center justify-content-start">
                                <div class="section_title">最热chat</div>
                                <div class="section_tags ml-auto">
                                    <ul>
                                        <li class="active"><a href="category.html" th:href="@{/chathome}">全部</a></li>
                                        <li><a href="category.html">高中</a></li>
                                        <li><a href="category.html">初中</a></li>
                                        <li><a href="category.html">大学</a></li>
                                        <li><a href="category.html">小学</a></li>
                                    </ul>
                                </div>
                                <div class="section_panel_more">
                                    <ul>
                                        <li>更多
                                            <ul>
                                                <li><a href="category.html">new look 2018</a></li>
                                                <li><a href="category.html">street fashion</a></li>
                                                <li><a href="category.html">business</a></li>
                                                <li><a href="category.html">recipes</a></li>
                                                <li><a href="category.html">sport</a></li>
                                                <li><a href="category.html">celebrities</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="section_content">
                                <div class="grid clearfix">

                                    <!-- Large Card With Background -->
                                    <div class="card card_large_with_background grid-item">
                                        <div id="divimg1" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title"><a href="post.html"
                                                                       th:text="${chat1.name}">第一篇chat</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(chat1.createtime, 'yyyy年MM月dd日 HH:mm:ss')}">Sep 29, 2017 at 9:48 am</span>--<span
                                                    th:text="${#dates.format(chat1.endtime, 'yyyy年MM月dd日 hh:mm:ss')}">Sep 29, 2017 at 9:48 am</span>
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Large Card With Image -->
                                    <div class="card grid-item card_large_with_image">
                                        <img class="card-img-top" th:src="@{'/image/'+${chat2.pichat}}" alt="">
                                        <div class="card-body">
                                            <div class="card-title"><a href="post.html"
                                                                       th:text="${chat2.name}">第二篇chat</a></div>
                                            <p class="card-text" th:text="${chat2.brief}">Pick the yellow peach that
                                                looks like a sunset with its red, orange, and pink coat skin, peel it
                                                off with your teeth. Sink them into unripened...</p>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(chat2.createtime,'yyyy-MM-dd HH:mm:ss')}">Sep 29, 2017 at 9:48 am</span>--<span
                                                    th:text="${#dates.format(chat2.endtime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Default Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${chat3.pichat}}" alt="">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${chat3.name}">第三篇chat</a>
                                            </div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span
                                                    th:text="${#dates.format(chat3.createtime,'yyyy-MM-dd HH:mm:ss')}">Sep 29, 2017 at 9:48 am</span>--<span
                                                    th:text="${#dates.format(chat3.endtime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Default Card With Background -->

                                    <div class="card card_default card_default_with_background grid-item">
                                        <div id="imgdiv2" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${chat4.name}">第四篇chat</a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Card No Image -->
                                    <div class="card card_default card_default_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${chat5.name}">第五篇chat</a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Card No Image -->
                                    <div class="card card_default card_default_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${chat6.name}">第六篇chat</a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Card With Background -->

                                    <div class="card card_default card_default_with_background grid-item">
                                        <div id="imgdiv3" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html"
                                                                                        th:text="${chat7.name}">第七篇chat</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <!-- chat结束 -->
                        <!--视频开始-->

                        <div class="blog_section">
                            <div class="section_panel d-flex flex-row align-items-center justify-content-start">
                                <div class="section_title">推荐视频</div>
                            </div>
                            <div class="section_content">
                                <div class="grid clearfix">

                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${video1.pic}}" alt="">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video1.videoname}">第一个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video1.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>
                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${video2.pic}}" alt="">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video2.videoname}">第三个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video2.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${video3.pic}}"
                                             alt="https://unsplash.com/@jakobowens1">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="video3.videoname">第三个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video3.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card With Background -->
                                    <div class="card card_default card_small_with_background grid-item">
                                        <div id="imgdiv4" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video4.videoname}">四</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video4.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card With Background -->
                                    <div class="card card_default card_small_with_background grid-item">
                                        <div id="imgdiv5" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video5.videoname}">第五个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video5.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card With Image -->
                                    <div class="card card_small_with_image grid-item">
                                        <img class="card-img-top" th:src="@{'/image/'+${video6.pic}}"  alt="">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video6.videoname}">第六个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video6.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card Without Image -->
                                    <div class="card card_default card_small_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video7.videoname}">第七个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video7.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Small Card Without Image -->
                                    <div class="card card_default card_small_no_image grid-item">
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video8.videoname}">第八个视频</a></div>
                                            <small class="post_meta"><a href="#">Katy Liu</a><span th:text="${video8.timelong}">Sep 29, 2017 at 9:48 am</span>min
                                            </small>
                                        </div>
                                    </div>

                                    <!-- Default Card With Background -->
                                    <div class="card card_default card_default_with_background grid-item">
                                        <div id="imgdiv6" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video9.videoname}">第久个视频</a></div>
                                        </div>
                                    </div>

                                    <!-- Default Card With Background -->
                                    <div class="card card_default card_default_with_background grid-item">
                                        <div id="imgdiv7" class="card_background"></div>
                                        <div class="card-body">
                                            <div class="card-title card-title-small"><a href="post.html" th:text="${video10.videoname}">第十个视频</a></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="load_more">
                        <div id="load_more" class="load_more_button text-center trans_200">Load More</div>
                    </div>
                </div>

                <!-- Sidebar -->

                <div class="col-lg-3">
                    <div class="sidebar">
                        <div class="sidebar_background"></div>

                        <!-- Top Stories -->

                        <div class="sidebar_section">
                            <div class="sidebar_title_container">
                                <div class="sidebar_title">今日最热</div>
                                <div class="sidebar_slider_nav">
                                    <div class="custom_nav_container sidebar_slider_nav_container">
                                        <div class="custom_prev custom_prev_top">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="0,5.61 5.609,0 7,0 7,1.438 2.438,6 7,10.563 7,12 5.609,12 -0.002,6.39 "/>
											</svg>
                                        </div>
                                        <ul id="custom_dots" class="custom_dots custom_dots_top">
                                            <li class="custom_dot custom_dot_top active"><span></span></li>
                                            <li class="custom_dot custom_dot_top"><span></span></li>
                                            <li class="custom_dot custom_dot_top"><span></span></li>
                                        </ul>
                                        <div class="custom_next custom_next_top">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="6.998,6.39 1.389,12 -0.002,12 -0.002,10.562 4.561,6 -0.002,1.438 -0.002,0 1.389,0 7,5.61 "/>
											</svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="sidebar_section_content">

                                <!-- Top Stories Slider -->
                                <div class="sidebar_slider_container">
                                    <div class="owl-carousel owl-theme sidebar_slider_top">

                                        <!-- Top Stories Slider Item -->
                                        <div class="owl-item">

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第一个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第二个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第三个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第四个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Top Stories Slider Item -->
                                        <div class="owl-item">

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第五个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第六个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第七个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">今日最热第八个</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Top Stories Slider Item -->
                                        <div class="owl-item">

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">第一个post</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">第二个post</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">第三个post</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Sidebar Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/top_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"  th:text="${blog4.articletitle}">第四个post</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Advertising -->

                        <!--<div class="sidebar_section">-->
                            <!--<div class="advertising">-->
                                <!--<div class="advertising_background"-->
                                     <!--style="background-image:url(home/images/post_17.jpg)"></div>-->
                                <!--<div class="advertising_content d-flex flex-column align-items-start justify-content-end">-->
                                    <!--<div class="advertising_perc">-15%</div>-->
                                    <!--<div class="advertising_link"><a href="#">第一个广告</a></div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->

                        <!-- Newest Videos -->

                        <div class="sidebar_section newest_videos">
                            <div class="sidebar_title_container">
                                <div class="sidebar_title">最佳博主</div>
                                <div class="sidebar_slider_nav">
                                    <div class="custom_nav_container sidebar_slider_nav_container">
                                        <div class="custom_prev custom_prev_vid">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="0,5.61 5.609,0 7,0 7,1.438 2.438,6 7,10.563 7,12 5.609,12 -0.002,6.39 "/>
											</svg>
                                        </div>
                                        <ul id="custom_dots" class="custom_dots custom_dots_vid">
                                            <li class="custom_dot custom_dot_vid active"><span></span></li>
                                            <li class="custom_dot custom_dot_vid"><span></span></li>
                                            <li class="custom_dot custom_dot_vid"><span></span></li>
                                        </ul>
                                        <div class="custom_next custom_next_vid">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="6.998,6.39 1.389,12 -0.002,12 -0.002,10.562 4.561,6 -0.002,1.438 -0.002,0 1.389,0 7,5.61 "/>
											</svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="sidebar_section_content">

                                <!-- Sidebar Slider -->
                                <div class="sidebar_slider_container">
                                    <div class="owl-carousel owl-theme sidebar_slider_vid">

                                        <!-- Newest Videos Slider Item -->
                                        <div class="owl-item">

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title"th:text="${edu1.username}">第一个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu2.username}">第二个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu3.username}">第三个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu4.username}">第四个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Newest Videos Slider Item -->
                                        <div class="owl-item">

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu5.username}">第五个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu6.username}">第六个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu7.username}">第七个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${edu8.username}">第八个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Newest Videos Slider Item -->
                                        <div class="owl-item">

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_1.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">第就个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_2.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">第十个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_3.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">第十一个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Newest Videos Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="side_post_image">
                                                            <div><img th:src="@{/home/images/vid_4.jpg}" alt=""></div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">第十二个博主</div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Advertising 2 -->

                        <!--<div class="sidebar_section">-->
                            <!--<div class="advertising_2">-->
                                <!--<div class="advertising_background"-->
                                     <!--style="background-image:url(home/images/post_18.jpg)"></div>-->
                                <!--<div class="advertising_2_content d-flex flex-column align-items-center justify-content-center">-->
                                    <!--<div class="advertising_2_link"><a href="#">Turbulent <span>Mind</span></a></div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->

                        <!-- Future Events -->

                        <div class="sidebar_section future_events">
                            <div class="sidebar_title_container">
                                <div class="sidebar_title">推荐chat</div>
                                <div class="sidebar_slider_nav">
                                    <div class="custom_nav_container sidebar_slider_nav_container">
                                        <div class="custom_prev custom_prev_events">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="0,5.61 5.609,0 7,0 7,1.438 2.438,6 7,10.563 7,12 5.609,12 -0.002,6.39 "/>
											</svg>
                                        </div>
                                        <ul id="custom_dots" class="custom_dots custom_dots_events">
                                            <li class="custom_dot custom_dot_events active"><span></span></li>
                                            <li class="custom_dot custom_dot_events"><span></span></li>
                                            <li class="custom_dot custom_dot_events"><span></span></li>
                                        </ul>
                                        <div class="custom_next custom_next_events">
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												 width="7px" height="12px" viewBox="0 0 7 12" enable-background="new 0 0 7 12" xml:space="preserve">
												<polyline fill="#bebebe" points="6.998,6.39 1.389,12 -0.002,12 -0.002,10.562 4.561,6 -0.002,1.438 -0.002,0 1.389,0 7,5.61 "/>
											</svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="sidebar_section_content">

                                <!-- Sidebar Slider -->
                                <div class="sidebar_slider_container">
                                    <div class="owl-carousel owl-theme sidebar_slider_events">

                                        <!-- Future Events Slider Item -->
                                        <div class="owl-item">

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">13</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat1.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">27</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat2.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">02</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat3.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">09</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat4.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Future Events Slider Item -->
                                        <div class="owl-item">

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">13</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat5.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">27</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title" th:text="${chat6.name}">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">02</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">09</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                        <!-- Future Events Slider Item -->
                                        <div class="owl-item">

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">13</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">27</div>
                                                            <div class="event_month">apr</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">02</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                            <!-- Future Events Post -->
                                            <div class="side_post">
                                                <a href="post.html">
                                                    <div class="d-flex flex-row align-items-xl-center align-items-start justify-content-start">
                                                        <div class="event_date d-flex flex-column align-items-center justify-content-center">
                                                            <div class="event_day">09</div>
                                                            <div class="event_month">may</div>
                                                        </div>
                                                        <div class="side_post_content">
                                                            <div class="side_post_title">How Did van Gogh’s Turbulent
                                                                Mind
                                                            </div>
                                                            <small class="post_meta">Katy Liu<span>Sep 29</span></small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Footer -->

    <footer class="footer">
        <div class="container">
            <div class="row row-lg-eq-height">
                <div class="col-lg-9 order-lg-1 order-2">
                    <div class="footer_content">
                        <div class="footer_logo"><a href="#">avision</a></div>
                        <div class="footer_social">
                            <ul>
                                <li class="footer_social_facebook"><a href="#"><i class="fa fa-facebook"
                                                                                  aria-hidden="true"></i></a></li>
                                <li class="footer_social_twitter"><a href="#"><i class="fa fa-twitter"
                                                                                 aria-hidden="true"></i></a></li>
                                <li class="footer_social_pinterest"><a href="#"><i class="fa fa-pinterest"
                                                                                   aria-hidden="true"></i></a></li>
                                <li class="footer_social_vimeo"><a href="#"><i class="fa fa-vimeo"
                                                                               aria-hidden="true"></i></a></li>
                                <li class="footer_social_instagram"><a href="#"><i class="fa fa-instagram"
                                                                                   aria-hidden="true"></i></a></li>
                                <li class="footer_social_google"><a href="#"><i class="fa fa-google"
                                                                                aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                        <div class="copyright">
                            Copyright &copy;<script>document.write(new Date().getFullYear());</script>
                            All rights reserved | made with Colorlib - More Templates <a href="http://www.cssmoban.com/"
                                                                                         target="_blank" title="模板之家">模板之家</a>
                            - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 order-lg-2 order-1">
                    <div class="subscribe">
                        <div class="subscribe_background"></div>
                        <div class="subscribe_content">
                            <div class="subscribe_title">Subscribe</div>
                            <form action="#">
                                <input type="email" class="sub_input" placeholder="Your Email" required="required">
                                <button class="sub_button">
                                    <svg version="1.1" id="link_arrow_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
										 width="19px" height="13px" viewBox="0 0 19 13" enable-background="new 0 0 19 13" xml:space="preserve">
										<polygon fill="#FFFFFF" points="12.475,0 11.061,0 17.081,6.021 0,6.021 0,7.021 17.038,7.021 11.06,13 12.474,13 18.974,6.5 "/>
									</svg>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

<script th:src="@{/home/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/home/styles/bootstrap4/popper.js}"></script>
<script th:src="@{/home/styles/bootstrap4/bootstrap.min.js}"></script>
<script th:src="@{/home/plugins/OwlCarousel2-2.2.1/owl.carousel.js}"></script>
<script th:src="@{/home/plugins/jquery.mb.YTPlayer-3.1.12/jquery.mb.YTPlayer.js}"></script>
<script th:src="@{/home/plugins/easing/easing.js}"></script>
<script th:src="@{/home/plugins/masonry/masonry.js}"></script>
<script th:src="@{/home/plugins/masonry/images_loaded.js}"></script>
<script th:src="@{/home/js/custom.js}"></script>
</body>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${blog3.titlephoto}]]
    var imgdiv = document.getElementById("imgdiv")
    imgdiv.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${chat1.pichat}]]
    var divimg1 = document.getElementById("divimg1")
    divimg1.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${chat4.pichat}]]
    var imgdiv2 = document.getElementById("imgdiv2")
    imgdiv2.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${chat7.pichat}]]
    var imgdiv3 = document.getElementById("imgdiv3")
    imgdiv3.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video4.pic}]]
    var imgdiv4 = document.getElementById("imgdiv4")
    imgdiv4.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video5.pic}]]
    var imgdiv5 = document.getElementById("imgdiv5")
    imgdiv5.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video6.pic}]]
    var imgdiv6 = document.getElementById("imgdiv6")
    imgdiv6.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video7.pic}]]
    var imgdiv7 = document.getElementById("imgdiv7")
    imgdiv7.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${videotop.pic}]]
    var top23 = document.getElementById("top")
    top23.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${videotop1.pic}]]
    var top22 = document.getElementById("top1")
    top22.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video7.pic}]]
    var imgdiv11 = document.getElementById("imgdiv11")
    imgdiv11.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video7.pic}]]
    var imgdiv12 = document.getElementById("imgdiv12")
    imgdiv12.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video7.pic}]]
    var imgdiv13 = document.getElementById("imgdiv13")
    imgdiv13.style.backgroundImage = "url(" + img + ")"
</script>
<script th:inline="javascript">
    var img = '/edu/image/' + [[${video7.pic}]]
    var imgdiv14 = document.getElementById("imgdiv14")
    imgdiv14.style.backgroundImage = "url(" + img + ")"
</script>
</html>